import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Highcharts3D from 'highcharts/highcharts-3d';
import { useTranslation } from 'react-i18next';

Highcharts3D(Highcharts);

const Column3DChart2 = () => {
  const { t } = useTranslation();

  const options = {
    chart: {
      type: 'column',
      options3d: {
        enabled: true,
        alpha: 10,
        beta: 25,
        depth: 70
      },
      style: {
        fontSize: '1em'
      },
    },
    title: {
      text: t('Site rankings'),
      align: 'left'
    },
    subtitle: {
      text: t('We will re-evaluate the rankings every month.'),
      align: 'left'
    },
    plotOptions: {
      column: {
        depth: 25
      }
    },
    xAxis: {
      type: 'category',
      labels: {
        skew3d: true,
        style: {
          fontSize: '16px'
        }
      },
      title: {
        text: ''
      }
    },
    // yAxis: {
    //   title: {
    //     text: '评分',
    //     margin: 20
    //   }
    // },
    // tooltip: {
    //   valueSuffix: ' MNOK'
    // },
    yAxis: {
      title: {
        text: ''
      }
    },
    // tooltip: {
    //   pointFormat: ''
    // },
    series: [{
      name: '',
      showInLegend: false,
      data: [
        ['2024/01', 98],
        ['2024/02', 98],
        ['2024/03', 97],
        ['2024/04', 96],
        ['2024/05', 90],
        ['2024/06', 80],
        ['2024/07', 80],
      ]
    }],
    credits: {
      // 是否显示版权链接
      enabled: false
    }
  };

  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={options}
    />
  );
};

export default Column3DChart2;